<template>
  <div class="bg_fafafa p-20 w_full h_full">
    <div class="r_header flexbetween mt-20">
      <div class="f-14">数据概览</div>
      <div class="flex">
        <div
          v-for="(item, index) in dayList"
          :key="index"
          class="dayitem mr-10 commhover f-14 flexcenter"
          :class="{ active: queryParams.day == item.num }"
          @click="handleDay(item)"
        >
          {{ item.name }}
        </div>
        <el-date-picker
          v-model="times"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          class="mr-10"
        >
        </el-date-picker>
        <TreeSelect
          v-model="queryParams.group"
          placeholder="请选择"
          size="small"
          :props="{
            value: 'id',
            label: 'label',
            children: 'children',
          }"
          :options="treeList"
          width="200px"
        ></TreeSelect>
        <!-- <select-tree
          size="small"
          :treeList="treeList"
          nodeKey="id"
          :defaultData="defaultData"
          :treeProps="{
            children: 'children',
            label: 'label',
          }"
          @handleNodeClick="selectDrop"
          style="width: 200px"
          class="ml-10"
        /> -->
      </div>
    </div>

    <div class="card-body-wrap mt-20">
      <div class="box" v-for="(item, index) in labelItems" :key="index">
        <div class="number" v-html="item.value ? item.value : '-'"></div>
        <el-tooltip class="item" effect="dark" placement="top" v-if="item.tips">
          <div class="name">{{ item.title }}</div>
          <div slot="content" v-html="item.tips" />
        </el-tooltip>
        <div class="name" v-else>{{ item.title }}</div>
      </div>
    </div>

    <div class="r_header flexbetween mt-20">
      <div class="f-14">所有报表</div>
    </div>

    <div class="re_body bg_fff mt-20 flex">
      <div
        v-for="(item, index) in infoList"
        :key="index"
        @click="handlePage(item)"
        class="infobox flex mr-20 commhover p-20"
      >
        <div
          class="imgbox flexcenter"
          :style="{ backgroundColor: item.bgcolor }"
        >
          <img :src="item.icon" alt="" class="" />
        </div>
        <div class="info-text ml-20 flex11">
          <div class="title f-14 c_222333">{{ item.title }}</div>
          <div class="c_888999 f-12">{{ item.info }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import SelectTree from "@/components/SelectTree";
import TreeSelect from "@/components/TreeSelect";
export default {
  data() {
    return {
      queryParams: {
        day: 1,
      },
      dayList: [
        { name: "今天", num: 1 },
        { name: "昨天", num: 2 },
        { name: "7天", num: 7 },
        { name: "30天", num: 30 },
      ],
      times: "",
      treeList: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 2,
              label: "二级 1-1",
              children: [
                {
                  id: 3,
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          id: 4,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
              children: [
                {
                  id: 6,
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              id: 7,
              label: "二级 2-2",
              children: [
                {
                  id: 8,
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultData: {
        value: "",
        name: "",
      },
      labelItems: [
        {
          title: "有效客服数",
          value: 1,
          tips: "上班状态有变更、对话数有增减（自<br/>动接入、手动接入、主动发起、结<br/>束、转入、转出等）或接入的对话有<br/>发出消息等任一行为的客服人数",
        },
        {
          title: "对话总数",
          value: 5,
          tips: "客服处理完并结束的对话数（包含私<br/>聊和群聊对话，对话结束后才会统<br/>计，同个客户或同个群对话多次接入<br/>会统计多次）",
        },
        {
          title: "私聊对话数",
          value: 4,
          tips: "客服处理完并结束的私聊对话数（同<br/>个客户多次接入会统计多次）",
        },
        {
          title: "群聊对话数",
          value: 1,
          tips: "客服处理完并结束的群聊对话数（同<br/>个群多次接入会统计多次）",
        },
        {
          title: "接待客户数",
          value: 3,
          tips: "接待的客户人数（仅统计已完成的对<br/>话）",
        },
        { title: "发出消息数", value: 3, tips: "" },
        { title: "私聊发出消息数", value: 2, tips: "" },
        { title: "群聊发出消息数", value: 1, tips: "" },
        {
          title: "平均首次响应时长",
          value: "8<sub>时</sub>16<sub>分</sub>24<sub>",
          tips: "从对话被客服接入到客服首次响应的<br/>平均时间",
        },
        {
          title: "平均响应时长",
          value: "8<sub>时</sub>16<sub>分</sub>24<sub>",
          tips: "对话被客服接入后，客户发出消息到<br/>客服回复消息的平均时间",
        },
        {
          title: "私聊平均首次响应时长",
          value: "58<sub>分</sub>39<sub>",
          tips: "从对话被客服接入到客服首次响应的<br/>平均时间（只统计私聊对话）",
        },
        {
          title: "私聊平均响应时长",
          value: "58<sub>分</sub>39<sub>",
          tips: "对话被客服接入后，客户发出消息到<br/>客服回复消息的平均时间（只统计私<br/>聊对话）",
        },
        {
          title: "私聊平均对话持续时长",
          value: "12<sub>时</sub>4<sub>分</sub>12<sub>",
          tips: "从对话被客服接入至对话结束的平均<br/>时间（只统计私聊对话）",
        },
        {
          title: "群聊平均首次响应时长",
          value: "22<sub>时</sub>51<sub>分</sub>55<sub>",
          tips: "从对话被客服接入到客服首次响应的<br/>平均时间（只统计群聊对话）",
        },
        {
          title: "群聊平均响应时长",
          value: "22<sub>时</sub>51<sub>分</sub>55<sub>",
          tips: "对话被客服接入后，群成员发出消息<br/>到客服回复消息的平均时间（只统计<br/>群聊对话）",
        },
        {
          title: "群聊平均对话持续时长",
          value: "22<sub>时</sub>54<sub>分</sub>1<sub>",
          tips: "从对话被客服接入至对话结束的平均<br/>时间（只统计群聊对话）",
        },
        {
          title: "超时未响应数",
          value: "",
          tips: "客户发的消息中，客服没有在指定时<br/>间内进行回复的消息条数（超时时间<br/>可在“聊天配置-超时提醒设<br/>置”中设置）",
        },
        {
          title: "留言处理数",
          value: "",
          tips: "从留言列表主动接入的对话数量",
        },
      ],
      infoList: [
        {
          title: "服务量",
          info: "客服工作数量与质量统计报表",
          icon: require("@/assets/images/service.png"),
          bgcolor: "rgb(99, 162, 255)",
          routerName: "Reportservice",
        },
        {
          title: "客服考勤",
          info: "客服考勤情况统计报表",
          icon: require("@/assets/images/time.png"),
          bgcolor: "rgb(159, 97, 217)",
          routerName: "ReportCheckin",
        },
        {
          title: "客服评价",
          info: "客服评价统计报表",
          icon: require("@/assets/images/like.png"),
          bgcolor: "rgb(255, 192, 105)",
          routerName: "ReportEvaluate",
        },
        {
          title: "每小时数据",
          info: "每个时段所有客服服务量统计报表",
          icon: require("@/assets/images/card.png"),
          bgcolor: "rgb(115, 209, 61)",
          routerName: "reportHours",
        },
      ],
    };
  },
  components: {
    SelectTree,
    TreeSelect,
  },
  methods: {
    handleDay(item) {
      this.queryParams.day = item.num;
    },

    selectDrop(val) {
      this.defaultData.value = val;
    },

    handlePage(item) {
      this.$router.push({ name: item.routerName });
    },
  },
};
</script>
<style lang="scss" scoped>
.r_header {
  padding: 0 24px;
}
.dayitem {
  height: 32px;
  line-height: 32px;
  width: 50px;
  background-color: #f4f6f8;
  &.active {
    background-color: #3070ff !important;
    color: #fff !important;
  }
}
.re_body {
  padding: 24px 24px 12px;
  display: flex;
  flex-wrap: wrap;
}
.infobox {
  width: calc(20% - 16px);
  border: 1px solid #e9e9e9;
}
.imgbox {
  width: 68px;
  height: 68px;
  img {
    width: 28px;
    height: 28px;
  }
}
.info-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .title {
    line-height: 30px;
  }
}
.card-body-wrap {
  padding: 24px 24px 12px;
  background: #ffffff;
  display: flex;
  flex-wrap: wrap;
  .box {
    height: 86px;
    display: inline-block;
    padding: 16px 20px;
    vertical-align: middle;
    margin-right: 1.5%;
    background: #f5f5f5;
    flex: 1 1;
    border-radius: 4px;
    margin-bottom: 12px;
    .number {
      color: #222333;
      font-size: 25px;
      margin: 0;
      line-height: 34px;
      height: 34px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: baseline;
    }
    .name {
      color: #555666;
      font-size: 14px;
      line-height: 20px;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .guide-con {
    display: flex;
    width: 100%;
    .item {
      width: calc(20% - 16px);
      background: #fff;
      border: 1px solid #e9e9e9;
      padding: 20px;
      display: flex;
      margin-right: 20px;
      cursor: pointer;
      overflow: hidden;
      .icon {
        width: 68px;
        height: 68px;
        overflow: hidden;
        color: #fff;
        text-align: center;
        line-height: 68px;
        display: flex;
        align-items: center;
        justify-content: center;
        .cover {
          width: 28px;
          height: 28px;
        }
      }
      .main {
        margin-left: 20px;
        flex: 1 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        h3 {
          margin: 0;
          padding: 0;
          color: #222333;
          font-weight: 400;
          font-size: 14px;
          line-height: 30px;
        }
        p {
          margin: 0;
          padding: 0;
          color: #888999;
          font-size: 12px;
        }
      }
    }
  }
}
</style>